<template>
  <div >
    <!-- Header -->
    <div class="Header" @click="getState">
      <div class="HeaderSelect" >
        <span class="iconfont icon-sousuo"></span>
        <span class="HeaderSelectText">搜索商品,共144395款好物</span>
      </div>
    </div>
    <div class="Main">
      <!-- MainLeft -->
      <van-sidebar class="idebar-item" v-model="active">
        <van-sidebar-item @click="getIndex(index, item.id as number)" :title="item.name as string"
          :class="{ active: index === index1 }" v-for="(item, index) in categoryL1List" :key="item.id as number" />
      </van-sidebar>

      <!-- MainRight -->
      <div class="MainRight page_list_box">
        <div 
        @touchend="stateH"
        @touchmove="Pulluprefresh" 
        :class="{ move: move === 1 }"
        @touchstart="touchstart"
         >
          <img v-for="item in ImageList" :key="item.id" class="MainRightImage" :src="item.picUrl" alt="">
          <div v-for="item in categoryGroupList" :key="item.id" class="MainRightMain">
            <div class="MainRightMainOne">
              <h1 class="MainRightMain1">{{ item.name }}</h1>
              <div v-if="index1 > 0" class="MainRightMainOne1"></div>
            </div>
            <div class="MainRightMainOneTwo">
              <div @click="goPath(attr1.id)" v-for="attr1 in item.categoryList" :key="attr1.id" class="MainRightMainOneTwoItem">
                <img class="MainRightMainOneTwoImage" :src="attr1.wapBannerUrl" alt="">
                <span class="MainRightMainOneTwoText">{{ attr1.name }}</span>
              </div>

            </div>

          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'CatoryList'
})
</script>
<script lang="ts" setup>

import { ref, onMounted } from 'vue'

import { storeToRefs } from 'pinia'

import { usecateGoryStore } from '@/stores/modules/cateGory'

import {useRouter} from 'vue-router'
const active = ref(0);

// 导入store
const getGreyList = usecateGoryStore()

// 解构需要的数据
const { categoryL1List, ImageList, categoryGroupList } = storeToRefs(getGreyList)

onMounted(() => {
  getGreyList.increment()
  getIndex(0, 11)
})

// 下标
const index1 = ref(0)

const lsitID = ref(11)

// 获取点击的是哪个下标
const getIndex = (index: number, id: number) => {

  index1.value = index

  lsitID.value = id
  getGreyList.getPagingListdData(id)

}



const stateH = (e:any) => {
  move.value = 0
}

const Pulluprefresh = (e: any) => {
  if(e.touches[0].clientY > moves.value && document.documentElement.scrollTop === 0 ){
    move.value = 1
  }
}

const touchstart = (e:any)=>{
  moves.value = e.touches[0].clientY
}

const move = ref(0)

const moves = ref(0)

const router = useRouter()
// 路由跳转
const goPath = (attr1:number)=>{
    router.push({
    path:'/list',
    query:{
      attr1,
      lsitID:lsitID.value
    }
})

}

const getState = ()=>{
  router.push({
    path:'/search'
    })
}
</script>

<style lang="less" scoped>
.Header {
  height: 43px;
  border-bottom: 3px solid #ededed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 999;
  .HeaderSelect {
    background-color: #ededed;
    width: 92%;
    height: 28px;
    border-radius: 5px;
    font-size: 15px;
    color: #666666;
    line-height: 28px;
    display: flex;

    .iconfont {
      font-size: 18px;
      margin-left: 75px;
    }

  }
}

.van-sidebar-item--select:before {
  background-color: rgb(185, 47, 47);
  height: 25px;
  width: 3px;
  top: 60%;
}

.van-sidebar-item {
  background-color: #ffffff;
  height: 50px;
}

.active {
  color: rgb(185, 47, 47);
  font-weight: normal;
}

.idebar-item {
  position: fixed;
  top: 50px;
  height: 500px;
}

.Main {
  display: flex;
  margin-top: 5px;

  .MainRight {
    position: relative;
    top: 0;
    right: -75px;

    .MainRightMainOneTwo {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      order: 1;
      width: 249px;
      margin: auto;
      margin-top: 5px;
      margin-bottom: 5px;

      .MainRightMainOneTwoItem {
        width: 83px;
        height: 108px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .MainRightMainOneTwoImage {
          width: 72px;
          height: 72px;
          margin-bottom: 10px;
        }

        .MainRightMainOneTwoText {
          font-size: 10px;

        }
      }

    }

    width: 286px;
    border-left: 2px solid #ededed;

    .MainRightImage {
      width: 264px;
      height: 96px;
      margin-left: 15px;
      margin-top: 10px;
      background-color: #ededed;
    }

    .MainRightMain {
      .MainRightMainOne {
        .MainRightMainOne1 {
          border-bottom: 2px solid #ededed;
          width: 262px;
        }

        width: 251px;
        margin: auto;
        margin-top: 15px;

        .MainRightMain1 {
          font-size: 16px;
          margin-top: 10px;
          font-weight: 700;
          margin-bottom: 2px;
        }
      }
    }
  }
}

// .page_list_box {
//   height: 600px;
//   overflow-x: auto;
//   scrollbar-width: none;
// }

// ::-webkit-scrollbar {
//   display: none;
//   /*隐藏滚轮*/
// }

.move {
  transform: translateY(100px);
  transition: .3s
}
</style>
